<template>
  <div class="barChart">
    <div id="circleChart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
import colorConst from "@/utils/custom-color.js";
import echarts from "@/utils/lib/echarts";
import { PieChart } from "echarts/charts";
echarts.use([PieChart]);
export default {
  name: "pieChartofre",
  props: {
    // 图数据
    pieData: {
      type: Array,
      default: [],
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "150px",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // setTimeout(() => {
    this.getChartsdata(this.pieData);
    // }, 600);
  },
  beforeDestroy() {
    this.chartDes();
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    },
    array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    },
    getData(data) {
      let arrValue = this.getArrayValue(data, "value");
      let sumValue = eval(arrValue.join("+"));
      var res = {
        series: [],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
        res.series.push({
          name: "",
          type: "pie",
          top: "10",
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 12 + "%", 68 - i * 12 + "%"],
          center: ["50%", "51%"],
          label: {
            show: false,
            position: "center",
            color: "#1890FF",
            formatter: function (params) {
              return params.value; // 中间显示数据
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "",
          type: "pie",
          top: "10",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 12 + "%", 68 - i * 12 + "%"],
          center: ["50%", "51%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "#ffffff", //圆环背景色-全
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
      }
      return res;
    },
    getChartsdata(pieData) {
      // var chartDom = document.getElementById("main");
      // var myChart = echarts.init(chartDom);
      var option;
      let data = pieData;
      let arrName = this.getArrayValue(data, "name");
      // let objData = this.array2obj(data, "name");
      let optionData = this.getData(data);

      option = {
        color: colorConst.overviewPublicInstitutions,
        backgroundColor: "#ffffff",
        legend: {
          type: "scroll",
          // show: true,
          orient: "vertical",
          icon: "circle",
          // top: 'center',
          top: "18.5%",
          // bottom: "53%",
          // left: "40%",
          right: "1%",
          data: arrName,
          width: 40,
          // padding: [0, 54],
          itemGap: 6,
          //图例显示
          formatter: function (name) {
            return "{title|" + name + "}";
          },
          textStyle: {
            rich: {
              title: {
                // fontSize: 14,
                // lineHeight: 30,
                color: "#8C8C8C",
              },
              value: {
                fontSize: 18,
                lineHeight: 20,
                color: "#fff",
              },
            },
          },
        },
        title: {
          text: this.title, //图形标题，配置在中间对应效果图的80%
          textStyle: {
            fontSize: 20,
            fontWeight: 400,
          },
          // subtext: '副标题',
          left: "center",
          // top: "5%",
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}:{c}",
        },
        // color: ["#3669D4", "#00999F", "#4F5467"],
        color: colorConst.theme3,
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
      this.initChart("circleChart", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>
